<template>
  <div class="operation-box">
    <div class="left">
      <div class="operation-info">
        <sub-title name="患者信息" icon-name="operate" has-icon />
        <div class="operation-content">
          <div class="pat-info">
            <img src="@/assets/home/avtar.png" alt="" class="avtar" />
            <span>钱乐惜</span>
            <span>男</span>
            <span>44岁</span>
            <span>Ⅱ级</span>
          </div>
          <div class="operation">
            <span>手术名称</span>
            <span>多发性羧化脢缺乏症</span>
          </div>
          <div class="anaesthesia">
            <span>麻醉方式</span>
            <span>全麻</span>
          </div>
          <div>
            <div style="margin-right: 53px; margin-bottom: 0">
              <svg-icon
                name="anaesthesia"
                style="width: 28px; height: 28px; margin-right: 11px"
              />
              <span>冯雪梅</span>
            </div>
            <div>
              <svg-icon
                name="operation"
                style="width: 28px; height: 28px; margin-right: 11px"
              />
              <span>何炜亭</span>
            </div>
          </div>
        </div>
      </div>
      <div class="human-monitoring">
        <sub-title name="体征数据" icon-name="monitoring" has-icon />
        <human-monitor />
      </div>
    </div>
    <div class="center" ref="enabledElement">
      <!-- <monitor-Center /> -->
    </div>
    <div class="right">
      <div class="operate">
        <el-scrollbar>
          <sub-title name="影像工具" icon-name="Vector2" />
          <div class="operate-content">
            <ul>
              <li
                v-for="(item, index) in operateList"
                :key="index"
                @click="onTools(item,index)"
                :class="{ active: btnActive === index }"
              >
                <div>
                  <svg-icon
                    :name="item.svg"
                    style="width: 30px; height: 30px"
                  />
                </div>
                <span>{{ item.title }}</span>
              </li>
            </ul>
          </div>
        </el-scrollbar>
      </div>
      <div class="output">
        <sub-title name="诊断" icon-name="Vector4" />
        <el-input
          v-model="textarea"
          :rows="5"
          type="textarea"
          placeholder="请填写诊断"
        />

        <div class="submit" @click="onSubmit">提交</div>
      </div>
      <div class="xiaolan">
        <AI />
      </div>
    </div>
  </div>
</template>

<script setup>
import subTitle from "@/components/Title/subtTitle.vue";
import AI from "@/components/AI/AI.vue";
import stepBar from "@/components/StepBar/StepBar.vue";
import humanMonitor from "./comps/humanMonitor.vue";
import monitorCenter from "./comps/monitorCenter.vue";
import * as cornerstone from "cornerstone-core";
import cornerstoneMath from "cornerstone-math";
import * as cornerstoneTools from "cornerstone-tools";
import cornerstoneWADOImageLoader from "cornerstone-wado-image-loader";
import dicomParser from "dicom-parser";
import { onMounted } from "vue";
cornerstoneWADOImageLoader.configure({
  webWorkerPath: '../../utils/dicom.js' // 根据实际路径进行调整
});
cornerstoneTools.external.cornerstone = cornerstone;
cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
cornerstoneWADOImageLoader.webWorkerManager.initialize({
  maxWebWorkers: navigator.hardwareConcurrency || 1,
  startWebWorkersOnDemand: true,
  taskConfiguration: {
    decodeTask: {
      initializeCodecsOnStartup: false,
    },
  },
});
cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
// 初始化工具库
cornerstoneTools.init({
  showSVGCursors: true,
  touchEnabled: false,
});

const textarea = ref("");
const stepList = ref([
  { title: "进入手术室", time: "15:00" },
  { title: "麻醉", time: "15:10" },
  { title: "手术", time: "15:20" },
  { title: "手术", time: "15:40" },
  { title: "手术", time: "16:50" },
  { title: "手术", time: "16:55" },
  { title: "手术", time: "17:00" },
  { title: "手术", time: "" },
]);
const operateList = reactive([
  { svg: "moveTool", title: "移动",
  event:()=>{
    cornerstoneTools.addTool(cornerstoneTools.PanTool);
  cornerstoneTools.setToolActive("Pan", { mouseButtonMask: 1 });
  }
},
  { svg: "rolTool", title: "调窗" },
  { svg: "reverseColourTool", title: "反片" },
  { svg: "ellipseTool", title: "椭圆" },
  { svg: "rectangleTool", title: "矩形" },
  { svg: "lensTools", title: "透镜" },
  { svg: "xuanzhuanTool", title: "旋转" },
  { svg: "suofangTool", title: "缩放" },
  { svg: "arrows", title: "箭头" },
  { svg: "lineTool", title: "直线" },
  { svg: "gouhuaTool", title: "勾画" },
  { svg: "jiaoduTool", title: "角度" },
  { svg: "yuanxinTool", title: "圆心" },
  { svg: "tanzhenTool", title: "探针" },
  { svg: "chongzhiTool", title: "重置" },
  { svg: "jietuTool", title: "截屏" },
]);
const videoList = reactive([]);
const btnActive = ref(null);
const controlActive = ref(0);
const videoActive = ref(0);
const enabledElement = ref()

async function loadImage() {
  const image = await cornerstone.loadImage("dicomweb:https://tools.cornerstonejs.org/examples/assets/dicom/bellona/chest_lung/1.dcm");
  cornerstone.enable(enabledElement.value);


  cornerstoneTools.addStackStateManager(enabledElement.value);
  // cornerstoneTools.addToolState(enabledElement.value, "stack", stack);
  cornerstone.displayImage(enabledElement.value, image);
}
function initTool() {
  const StackScrollMouseWheelTool = cornerstoneTools.StackScrollMouseWheelTool;
  const props = {
    configuration: {
      // 是否在序列内循环
      loop: true,
      // 是否跳帧
      allowSkipping: true,
      // 倒转方向
      invert: false,
    },
  };
  cornerstoneTools.addTool(StackScrollMouseWheelTool, props);
  cornerstoneTools.setToolActive("StackScrollMouseWheel", {
    mouseButtonMask: 4,
  });
}

const onTools = (item,index) => {
  btnActive.value = index
};
onMounted(()=>{
  loadImage()
})






</script>
<style scoped lang="scss">
@mixin bg() {
  padding: 15px;
  border-radius: 12px;
  background: rgba(33, 33, 33, 0.41);
  box-shadow: 0px 0px 10.2px 1px rgba(148, 148, 148, 0.13) inset;
  background: linear-gradient(
    112.04deg,
    rgba(67, 213, 199, 0.12) 1.24%,
    rgba(0, 0, 0, 0) 64.01%
  );
  border: 1px solid;
  border-image-source: linear-gradient(
    130.78deg,
    rgba(0, 0, 0, 0.1) 55.65%,
    rgba(67, 213, 199, 0.2) 94.34%
  );
}
.operation-box {
  height: 100%;
  display: flex;
  .left {
    width: 426px;
    height: 100%;
    .operation-info {
      // height: 265px;
      height: calc(100% - 540px - 20px);
      @include bg();
      margin-bottom: 20px;
      padding-top: 10px;
      padding-bottom: 10px;
      padding-bottom: 0;
      color: #fff;
      font-weight: 700;
      font-size: 16px;

      .operation-content {
        height: calc(100% - 36px);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 18px 0;
        .pat-info {
          span {
            &:first-of-type {
              font-size: 24px;
            }
            &:not(:last-child) {
              margin-right: 20px;
            }
          }
        }
        .avtar {
          width: 52px;
          height: 52px;
          border-radius: 50%;
          margin-right: 20px;
          object-fit: contain;
        }
        div {
          display: flex;
          align-items: center;

          // &:not(:last-child) {
          //   margin-bottom: 18px;
          // }
        }
        .operation,
        .anaesthesia {
          span:first-of-type {
            font-weight: 400;
            margin-right: 24px;
          }
        }
      }
    }
    .human-monitoring {
      // height: calc(100% - 265px - 20px);
      height: 540px;
      @include bg();
      padding: 20px;
      padding-bottom: 0;
      overflow: hidden;
    }
  }
  .center {
    margin: 0 10px;
    width: calc(100% - 426px - 426px - 20px);
    height: 100%;
    .time-axis {
      display: flex;
      align-items: center;
      p {
        font-weight: 700;
        font-size: 36px;
        color: #fff;
        margin-right: 27px;
      }
      .step {
        width: calc(100% - 95px);
      }
    }
  }
  .right {
    height: 100%;
    width: 426px;
    .operate {
      @include bg();
      // height: calc(100% - 414px - 20px);
      padding: 15px;
      height: 38%;
      margin-bottom: 15px;
      ul {
        display: grid;
        grid-template-columns: repeat(6, 1fr); /* 默认每行 2 个元素 */

        li {
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;
          margin: 10px;
          div {
            width: 47px;
            height: 47px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(
              319.35deg,
              #262424 15.44%,
              #000000 84.72%
            );
            margin-bottom: 5px;
            font-size: 14px;
            color: rgba(197, 197, 197, 1);
          }
        }
        .active {
          div {
            background: linear-gradient(
              319.35deg,
              rgba(61, 167, 141, 0.1) 15.44%,
              #39d0ac 84.72%
            );
          }
          .svg-icon {
            fill: #fff;
          }
        }
      }
      .control-box {
        display: flex;
        justify-content: center;
        img {
          width: 202px;
          height: 202px;
          object-fit: contain;
          // margin: 0 17px;
          margin-top: -25px;
        }
        .icons {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
        .icon {
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient(
            319.35deg,
            #262424 15.44%,
            #000000 84.72%
          );
          width: 67px;
          height: 67px;
          border-radius: 50%;
          .svg-icon {
            fill: rgba(158, 158, 158, 0.6);
          }
        }
        .active {
          background: linear-gradient(
            319.35deg,
            rgba(61, 167, 141, 0.1) 15.44%,
            #39d0ac 84.72%
          );
          .svg-icon {
            fill: #fff;
          }
        }
      }
    }
    .xiaolan {
      @include bg();
      padding: 10px;
      height: 31%;
    }
    .output {
      height: 27.5%;
      @include bg();
      // margin: 20px 0;
      margin-bottom: 15px;
      .submit{
        float:right;
        width: 100px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #275d59;
        margin-top: 10px;
        border-radius: 10px;
      }
    }
    .setting {
      height: 141px;
      @include bg();
    }
  }
}
:deep(.el-textarea__inner) {
  background: #141e1f;
}
</style>
